<template>
  <el-dialog title="新增" :width="width" :visible.sync="isShowDialog" @close="closeDialog" :close-on-click-modal="false">
    <div class="dialog-form">
      <el-form :model="editForm" label-width="90px" ref="editForm" style="display:flex;flex-wrap:wrap;">
        <el-form-item :label="item.label" v-for="(item,key) in editForm" :key="key" :style="width == '960px' && !item.oneLine ? 'width:50%;' : 'width:100%'">
          <!--普通输入框-->
          <el-input v-if="item.type == 'text'" :type="item.type" v-model="item.value" autocomplete="off" :placeholder="item.placeholder"></el-input>
          <!--多行输入框-->
          <el-input v-if="item.type == 'textarea'"  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="item.value" autocomplete="off"></el-input>
          <!--数字输入器-->
          <el-input-number v-if="item.type == 'number'" v-model="item.value" :precision="item.precision ? item.precision : 0" :step="item.step ? item.step : 1" :max="item.max ? item.max : 999999999"></el-input-number>
          <!--日期时间选择器-->
          <el-date-picker  v-if="item.type=='date' || item.type=='datetime'" :key="item.field" :type="item.type"  v-model="item.value" :placeholder="item.placeholder" class="search-text" clearable></el-date-picker>
          <!--固定数据下拉选择框-->
          <template v-if="item.type=='select'">
            <el-select  v-model="item.value" :placeholder="item.placeholder" class="search-select" clearable>
              <el-option
                v-for="options in item.options"
                :key="options.value"
                :label="options.label"
                :value="options.value">
              </el-option>
            </el-select>
            <el-select
              v-if="item.type == 'combobox'"
              v-model="comboboxValue"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="comboboxLoading">
              <el-option
                v-for="item in comboboxOptions"
                :key="item.id"
                :label="item.name"
                :value="item.code">
                <div style="display:flex;align-items: center;">
                  <span style="">{{ item.code }}</span>
                  <span style="padding-left:5px;color: #8492a6; font-size: 13px">{{ item.name }}</span>
                </div>
              </el-option>
            </el-select>
          </template>
          <!--读取数据下拉选择框-->
          <template v-if="item.type=='selectdata'">
            <el-select  v-model="item.value" :placeholder="item.placeholder" class="search-select" clearable>
               <el-option-group
                v-for="group in item.options"
                :key="group.value"
                :label="group.label">
                  <el-option
                    v-for="item in group.children"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-option-group>
            </el-select>
          </template>
          <!--单张封面图片选择-->
          <template v-if="item.type == 'cover'">
            <el-upload
              class="cover-uploader"
              name="uploadFileData"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :show-file-list="false"
              :on-success="(e)=>uploadCoverSuccess(e,key)"
              :before-upload="beforeCoverUpload">
                <img v-if="item.value" :src="item.value" class="cover">
                <i v-else class="el-icon-plus cover-uploader-icon"></i>
            </el-upload>
          </template>
          <!--多张图片可拖拽-->
          <uploadImageDrag v-if="item.type == 'pics'" :value.sync="item.value" ref="uploadImageDrag"></uploadImageDrag>
          <!--富文本编辑-->
          <div v-if="item.type == 'richtext'"><tinymce v-model="item.value" :height="300" /></div>
        </el-form-item>
        <slot name="user"></slot>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<style scoped>
.my-autocomplete li {line-height: normal;padding: 7px;}
.name {text-overflow: ellipsis; overflow: hidden;}
.addr {font-size: 12px;color: #b4b4b4;}
.highlighted .addr {color: #ddd;}
.dialog-form{padding:20px 50px 5px 20px;}
.dialog-footer{display: flex;justify-content: flex-end;}

</style>
<style>

</style>
<script>
import tool from '@/utils/tool';
import { editData,getSelectData } from '@/api/common.js';
import {getTime} from '@/utils';

import Tinymce from '@/components/Tinymce';
import uploadImageDrag from '@/components/common/uploadImageDrag';
export default {
  components:{Tinymce,uploadImageDrag},
  props:{
    controller:{
      type:String,
      default(){
        return '';
      }
    },
    formSize:{
      type:String,
      default(){
        return '';
      }
    },
    isShow:{
      type:Boolean,
      default(){
        return false;
      }
    },
    form:{
      type:Object,
      default(){
        return {};
      }
    },
    width:{
      type:String,
      default(){
        return '500px';
      }
    }
  },
  data(){
    return {
      id:0,
      comboboxValue: [],
      comboboxList: [{id:1,code:'A001',name:'张三'},{id:2,code:'B001',name:'李四'}],
      comboboxLoading: false,
      comboboxOptions: [],
      isShowDialog:false,
      editForm:{},
      uploadUrl:this.$config.requestUrl+'/' + this.$config.app+'/' + this.$config.version + '/Upload/uploadImage',
      uploadHeaders:this.$store.getters.userInfo.user_token ? {'User-Token' :this.$store.getters.userInfo.user_token} : {}
    }
  },
  created(){
      this.initForm();
  },
  mounted(){
    this.list = this.comboboxOptions.map(item => {
        return { label: `label:${item.name}`, value: `value:${item.code}` };
      });
  },
  methods:{
    initForm(){
      //当前init是窗口显示后执行，此时已经通过updateForm初始化表单数值
      let editForm = {...this.form};
      for (let k in editForm) {
        if (editForm[k].type == 'selectdata'){
          this.getSelectData(editForm[k]);
        }
      }
      this.editForm = editForm;
    },
    getSelectData(item){
      if (item.dataController) {
        getSelectData(item.dataController).then(data=>{
          item.options = data;
        });
      }
    },
    updateForm(data){
      for (let k in this.editForm) {
        if (data[k] || data[k] == 0) this.$set(this.editForm[k],'value',data[k]);
        if (this.editForm[k].type == 'richtext') {
          let tinymces = window.tinymce ? window.tinymce.get() : [];
          if (tinymces.length > 0) tinymces[0].setContent(data[k]);
        }
      }
      this.id = data.id;
    },
    uploadCoverSuccess(e,key){
      this.editForm[key].value = e.data.url;
    },
    beforeCoverUpload(e){

    },
    remoteMethod(query) {
        if (query !== '') {
          this.comboboxLoading = true;
          setTimeout(() => {
            this.comboboxLoading = false;
            this.comboboxOptions = this.comboboxList.filter(item => {
              return item.name.toLowerCase()
                .indexOf(query.toLowerCase()) > -1 || item.code.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.comboboxOptions = [];
        }
      },
    closeDialog(){
      this.isShowDialog = false;
      this.$emit('closeDialog');
    },
    submit(){
      //this.$emit('editData',this.editForm);

 
      let data = {};
      for (let key in this.editForm) {
         data[key] = this.editForm[key].value ? this.editForm[key].value : '';
      }
      data.id = this.id;
      editData(this.controller,data).then(data=>{
        tool.succToast('修改成功');
        this.$emit('editSuccess');
        this.$emit('closeDialog');
      });
    }
  },
  watch:{
    isShow(newValue){
      this.isShowDialog = newValue;
      if (newValue) this.initForm();
    }
  }
}


</script>